{extend  name="index/index" /}
<!-- 内容区域 -->
<div class="tpl-content-wrapper">
    {block name="main"}
    <div style="display: none" class="row-content am-cf">
        <div class="row  am-cf">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-4">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">月度财务收支计划</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <div class="am-fl">
                            <div class="widget-fluctuation-period-text">
                                ￥61746.45
                                <button class="widget-fluctuation-tpl-btn">
                                    <i class="am-icon-calendar"></i>
                                    更多月份
                                </button>
                            </div>
                        </div>
                        <div class="am-fr am-cf">
                            <div class="widget-fluctuation-description-amount text-success" am-cf>
                                +￥30420.56

                            </div>
                            <div class="widget-fluctuation-description-text am-text-right">
                                8月份收入
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
                <div class="widget widget-primary am-cf">
                    <div class="widget-statistic-header">
                        本季度利润
                    </div>
                    <div class="widget-statistic-body">
                        <div class="widget-statistic-value">
                            ￥27,294
                        </div>
                        <div class="widget-statistic-description">
                            本季度比去年多收入 <strong>2593元</strong> 人民币
                        </div>
                        <span class="widget-statistic-icon am-icon-credit-card-alt"></span>
                    </div>
                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
                <div class="widget widget-purple am-cf">
                    <div class="widget-statistic-header">
                        本季度利润
                    </div>
                    <div class="widget-statistic-body">
                        <div class="widget-statistic-value">
                            ￥27,294
                        </div>
                        <div class="widget-statistic-description">
                            本季度比去年多收入 <strong>2593元</strong> 人民币
                        </div>
                        <span class="widget-statistic-icon am-icon-support"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row am-cf">
            <div class="am-u-sm-12 am-u-md-8">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">月度财务收支计划</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="tpl-echarts">
                    </div>
                </div>
            </div>
        </div>
        <div class="row am-cf">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-4 widget-margin-bottom-lg ">
                <div class="tpl-user-card am-text-center widget-body-lg">
                    <div class="tpl-user-card-title">
                        禁言小张
                    </div>
                    <div class="achievement-subheading">
                        月度最佳员工
                    </div>
                    <img class="achievement-image" src="/static/admin/main/assets/img/user07.png" alt="">
                    <div class="achievement-description">
                        禁言小张在
                        <strong>30天内</strong> 禁言了
                        <strong>200多</strong>人。
                    </div>
                </div>
            </div>

            <div class="am-u-sm-12 am-u-md-12 am-u-lg-8 widget-margin-bottom-lg">

                <div class="widget am-cf widget-body-lg">

                    <div class="widget-body  am-fr">
                        <div class="am-scrollable-horizontal ">
                            <table width="100%" class="am-table am-table-compact am-text-nowrap tpl-table-black "
                                   id="example-r">
                                <thead>
                                <tr>
                                    <th>文章标题</th>
                                    <th>作者</th>
                                    <th>时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="gradeX">
                                    <td>新加坡大数据初创公司 Latize 获 150 万美元风险融资</td>
                                    <td>张鹏飞</td>
                                    <td>2016-09-26</td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="javascript:;">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="javascript:;" class="tpl-table-black-operation-del">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="even gradeC">
                                    <td>自拍的“政治角色”：观众背对希拉里自拍合影表示“支持”</td>
                                    <td>天纵之人</td>
                                    <td>2016-09-26</td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="javascript:;">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="javascript:;" class="tpl-table-black-operation-del">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="gradeX">
                                    <td>关于创新管理，我想和你当面聊聊。</td>
                                    <td>王宽师</td>
                                    <td>2016-09-26</td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="javascript:;">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="javascript:;" class="tpl-table-black-operation-del">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="even gradeC">
                                    <td>究竟是趋势带动投资，还是投资引领趋势？</td>
                                    <td>着迷</td>
                                    <td>2016-09-26</td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="javascript:;">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="javascript:;" class="tpl-table-black-operation-del">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="even gradeC">
                                    <td>Docker领域再添一员，网易云发布“蜂巢”，加入云计算之争</td>
                                    <td>醉里挑灯看键</td>
                                    <td>2016-09-26</td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="javascript:;">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="javascript:;" class="tpl-table-black-operation-del">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="container-fluid am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">用户编辑</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <form class="am-form tpl-form-border-form tpl-form-border-br myform" action="{:url('admin/Userlist/doeditpwd')}" method="post" enctype="multipart/form-data">
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-form-label">用户ID </label>
                                <div class="am-u-sm-9">
                                    <input type="text" name="id" readonly class="am-form-field tpl-form-no-bg myid" value="{$data['id']}">
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-form-label">用户名 </label>
                                <div class="am-u-sm-9">
                                    <input type="text" class="am-form-field tpl-form-no-bg myusername"  readonly name="username"
                                           placeholder="输入4-20个以字母开头、可带数字、“_”、“.”的用户名" value="{$data['username']}">
                                    <small id="username"></small>
                                </div>
                            </div>

                            <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">旧密码</label>
                            <div class="am-u-sm-9">
                            <input type="password" class="am-form-field tpl-form-no-bg myoldpwd" name="oldpwd" value=""
                            placeholder="请输入旧密码">
                            <small id="oldpwd"></small>
                            </div>
                            </div>
                            <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">新密码</label>
                            <div class="am-u-sm-9">
                            <input type="password" class="am-form-field tpl-form-no-bg myuserpass" name="userpass" value=""
                            placeholder="请输入6-20个字符（必须是字母和数字组合，不区分大小写)[若密码没有进行修改，该项可不填]">
                            <small id="userpass"></small>
                            </div>
                            </div>
                            <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">确认密码</label>
                            <div class="am-u-sm-9">
                            <input type="password" class="am-form-field tpl-form-no-bg myrepass" name="repass" value=""
                            placeholder="请再输入一次密码">
                            <small id="repass"></small>
                            </div>

                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3">
                                    <input type="hidden" name="id" value="{$id}">
                                    <button type="submit"
                                            class="am-btn am-btn-primary tpl-btn-bg-color-success mysubmit">提交
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="myjs"}
<script>
    // 接收旧密码
    $(function (){
        $('.myoldpwd').blur(function () {
            // 当鼠标离开的时候获取到ID, 定义为全局变量，下面要用到
            id = $('.myid').val();
            oldpwd = $('myoldpwd').val();
            checkoldpwd(oldpwd,id);
        });
        // 密码
        $('.myuserpass').blur(function(){
            // 这儿的 userpass 不加var，因为下面要用到，要定义为全局变量
            userpass = $(this).val();
            checkuserpass(userpass);
            checkrepass(repass, userpass);
        });
        // 确认密码
        $('.myrepass').blur(function(){
            repass = $(this).val();
            checkrepass(repass, userpass);
        });
        // 新密码、确认密码、旧密码一致
        $('.mysubmit').submit(function (){
            return (function (){
                var oldpwd = $('.myoldpwd').val();
                var userpass = $('.myuserpass').val();
                var repass = $('.myrepass').val();
                // 1. 三项都为空，提示 "未进行任何操作"
                if (oldpwd === '' && userpass === '' && repass === '') {
                    alert('未进行任何操作');
                    return false;
                }
                // 2. 新密码 确认密码都为空，不管旧密码正确与否，提示 "未进行任何操作"
                if (userpass === '' && repass === '') {
                    alert('未进行任何操作');
                    return false;
                }
                // 3. 新密码 与 确认密码一致的情况
                if (userpass === repass) {
                    // 1) 旧密码为空，提示 "输入原密码"
                    if (oldpwd === '') {
                        alert('输入原密码');
                        return false;
                    }
                    // 2) 旧密码错误，提示 "原密码错误"
                    if (oldpwd !== 'data') {
                        alert('原密码错误');
                        return false;
                    }
                }
                // 4. 新密码、确认密码、旧密码都符合规则，提交
                return true;
            });
        });
    });


    // 接收旧密码
    function checkoldpwd(oldpwd, id) {
        $.ajax({
            type: "post",
            url: "{:url('admin/Userlist/edituserpass')}",
            data: {
                "oldpwd": oldpwd,
                "id" : id
            },
            dataType: "json",
            success: function (data) {

            }

        });
    }
    // 密码验证：请输入6-20个字符（必须是字母和数字组合，不区分大小写）
    function checkuserpass(userpass) {
        var reg = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/i;

        if(!reg.test(userpass)) {
            $('#userpass').css('color', 'red').html('请输入6-20个字符（必须是字母和数字组合），不区分大小写');
        } else {
            $('#userpass').html('');
        }

    }
    // 确认密码
    function checkrepass(userpass, repass) {
        if (userpass == repass) {
            $('#repass').html('');
            $('#userpass').html('');
        } else {
            $('#repass').css('color', 'red').html('密码不一致');
        }

    }
</script>
{/block}
{/block}